<template>
  <div id="carouselExampleDark" class="carousel carousel-dark slide">
    <div class="carousel-indicators">
      <button v-for="(d, i) in data " type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"
        :class="{ active: flag === i }"></button>
    </div>
    <div class="carousel-inner">
      <div v-for="(d, i) in data " class="carousel-item" :class="{ active: flag === i }" data-bs-interval="10000">
        <img :src="d.src" class="d-block w-100" alt="">
        <div class="carousel-caption d-none d-md-block">
          <h5>{{ d.title }}</h5>
          <p>{{ d.intro }}</p>
        </div>
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
      <span class="carousel-control-next-icon"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</template>
<script>
import * as bootstrap from 'bootstrap/dist/js/bootstrap.esm.js';
export default {
  data() {
    return {
      flag: 0
    }
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    new bootstrap.Carousel('#carouselExampleDark')

    const myCarousel = document.getElementById('carouselExampleDark')

    myCarousel.addEventListener('slide.bs.carousel', event => {
      this.flag = event.to;
    })
  },
}
</script>